html {
  font-size: 13.33333vw;
}

@media screen and (max-width: 320px) {
  html {
    font-size: 42.667PX;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 321px) and (max-width: 360px) {
  html {
    font-size: 48PX;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 361px) and (max-width: 375px) {
  html {
    font-size: 50PX;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 376px) and (max-width: 393px) {
  html {
    font-size: 52.4PX;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 394px) and (max-width: 412px) {
  html {
    font-size: 54.93PX;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 413px) and (max-width: 414px) {
  html {
    font-size: 55.2PX;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 415px) and (max-width: 480px) {
  html {
    font-size: 64PX;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 481px) and (max-width: 540px) {
  html {
    font-size: 72PX;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 541px) and (max-width: 640px) {
  html {
    font-size: 85.33PX;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 641px) and (max-width: 720px) {
  html {
    font-size: 96PX;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 721px) and (max-width: 768px) {
  html {
    font-size: 102.4PX;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 769px) {
  html {
    font-size: 102.4PX;
  }
  html #app {
    width: 768PX;
    margin: 0 auto;
  }
}

.clearfix:after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
}

input, button, select, textarea {
  outline: none;
}

/* page change */
.back-enter-active,
.back-leave-active,
.forward-enter-active,
.forward-leave-active {
  will-change: transform;
  transition: all 350ms;
  position: absolute;
  height: 100%;
  backface-visibility: hidden;
  perspective: 1000;
}

.back-enter {
  opacity: 0.75;
  transform: translate3d(-35%, 0, 0) !important;
}

.back-enter-active {
  z-index: -1 !important;
  transition: all 350ms linear;
}

.back-leave-active {
  transform: translate3d(100%, 0, 0) !important;
  transition: all 350ms linear;
}

.forward-enter {
  transform: translate3d(100%, 0, 0) !important;
}

.forward-enter-active {
  transition: all 350ms linear;
}

.forward-leave-active {
  z-index: -1;
  opacity: 0.65;
  transform: translate3d(-35%, 0, 0) !important;
  transition: all 350ms linear;
}

.slide-left-leave-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-right-enter-active {
  transition: all 350ms;
}

.slide-left-enter, .slide-right-leave-active {
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}

.slide-left-leave-active, .slide-right-enter {
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}
